<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/news -->
<template>
  <div class="pagebody">
    <Header />
    <div class="bgfff">
      <div class="container">
        <!-- 导航 -->
        <div class="navigation">
          <div class="nav_font">Pharmacy Captain Homepage</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Drug name</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Q&A List Page</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font" style="color:#616469;">Article Title</div>
        </div>
        <div class="content">
          <div class="left">
            <!-- 文章详情 -->
            <div class="title align-center">
              <div class="title_txt">Remote consultation </div>
            </div>
            <ul>
              <li class="news_li borderbox" v-for="(item, index) in 10" :key="index">
                <div class="li_title lineclamp1">What is the recommended dosage of cyproterone acetate tablets?What is
                  the ...
                </div>
                <div class="li_content lineclamp2">Cyproterone acetate tablets are a medical procedure that plays an
                  important role in the treatment of specific are diseases.What is the therapeutic effect of cyproterone
                  acetate tabletsThe therapeutic the therapeutic ···
                </div>
                <div class="li_bot justify-between align-center">
                  <div><span class="mr16">Article Source:Seagull Medical</span><span>Page views: 666 </span></div>
                  <div> 2024-05-01 17:19</div>
                </div>
              </li>
            </ul>
            <div class="pager bgfff align-center justify-end mt24">
              <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                  :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                  layout="total, prev, pager, next, jumper" :total="100">
                </el-pagination>
              </div>
            </div>
            <img src="@/static/images/news/que.png" class="any_questions" />
            <drugType :drug=drug></drugType>
            <!-- <drugCard style="margin-top:42px;" :drug="drugInfo"></drugCard> -->
            <medicinePirce :name="'Recommended Articles'" :newslist="RecommendedList"></medicinePirce>
            <medicinePirce :name="'Related Articles'" :newslist="relatedList"></medicinePirce>
            <relatedMedications :drugList="drugList"></relatedMedications>
          </div>
          <right></right>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import drugCard from '@/components/drugs/drugCard'
export default {
  components: {
    drugCard,
  },
  async asyncData ({ app, params, error }) {

  },
  data () {
    return {
      content: "<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ....<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ....<p>Drug side effects of Sotorasib（ H2 arial  20px  #0041a3）</p> ...."
    }
  },

}
</script>

<style lang="scss" scoped>
.pagebody {
  .navigation {
    display: flex;
    justify-content: flex-start;
    padding-top: 26px;
    align-items: center;

    .nav_font {
      font-size: 12px;
      color: #8a95a2;
      line-height: 12px;
      margin-right: 8px;
    }

    .arrow {
      width: 6px;
      height: 10px;
      margin-right: 8px;
    }
  }

  .content {
    display: flex;
    justify-content: flex-start;

    .left {
      width: 848px;
      flex-shrink: 0;
      padding-right: 24px;
      box-sizing: border-box;

      .title {
        height: 66px;
        margin-top: 35px;
        border-bottom: 1px solid #E5E8EB;

        .title_txt {
          font-family: Arial, Arial;
          font-weight: 900;
          font-size: 24px;
          color: #2E343E;
          text-align: left;
          border-bottom: 6px solid #0041A3;
          width: max-content;
          line-height: 60px;
          height: 60px;
        }
      }

      .news_li {
        margin-top: 24px;
        border-bottom: 1px solid #E5E8EB;
        padding-bottom: 16px;

        .li_title {
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 18px;
          color: #2E343E;
          line-height: 28px;
          text-align: left;
        }

        .li_content {
          margin: 8px 0 14px;
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 16px;
          color: #616469;
          line-height: 28px;
          text-align: left;
        }

        .li_bot {
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 12px;
          color: #8A95A2;
          line-height: 12px;
          text-align: left;
        }
      }

      .pager {
        justify-content: end;
        display: flex;
        margin-top: 16px;
      }

      .any_questions {
        width: 824px;
        height: 148px;
        margin-top: 16px;
      }

      .tips {
        font-size: 12px;
        color: #8a95a2;
        line-height: 24px;
        margin-top: 17px;
      }
    }

    .right {
      margin-left: 16px;
    }
  }
}
</style>